<template>
	<view class="page flex-col">
		<view class="box_1 flex-col">
			<view class="box_5 flex-col">
				<view class="box_6 flex-col">
					<view class="">
						提交资料需要成为平台会员，才能上传
					</view>
					<view class="text-wrapper_1 flex-row justify-between">
						<text class="text_2" style="font-weight: bold;">{{orders.name}}</text>
						<text class="text_3" v-if="orders.price">¥{{orders.price}}</text>
					</view>
					<view class="text-wrapper_2 flex-row justify-between">
						<text class="text_4">合计：</text>
						<text class="text_5" v-if="orders.price">¥{{orders.price}}</text>
					</view>
				</view>
				<view class="flex at pay">
					<text style="font-weight: bold;">支付方式</text>
					<view class="ml" style="">
						<view>
							<u-radio-group v-model="form.pay_type">
								<u-radio active-color="#EF7700" v-for="(item, index) in radioList2" :key="index"
									:name="item.value" :disabled="item.disabled">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
			</view>
			<view class="box_9 flex-col">
				<view style="font-weight: bold;" class="">
					信息填写
				</view>
				<view class="">
					<u-form :model="form" ref="uForm">
						<u-form-item label="身份" label-width="150">
							<u-radio-group v-model="form.identity">
								<u-radio active-color="#EF7700" v-for="(item, index) in radioList1" :key="index"
									:name="item.value" :disabled="item.disabled" @change="checkIdentity">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<view v-if="identityIndex==1">
							<u-form-item label="姓名" label-width="150">
								<u-input style="text-align: right;" placeholder="请输入姓名" v-model="form.name" />
							</u-form-item>
							<u-form-item label="手机号" label-width="150">
								<u-input placeholder="请输入手机号" v-model="form.phone" />
							</u-form-item>
							<u-form-item label="邮箱" label-width="150">
								<u-input placeholder="请输入邮箱" v-model="form.email" />
							</u-form-item>
							<u-form-item label="微信号" label-width="150">
								<u-input placeholder="请输入微信号" v-model="form.wechat" />
							</u-form-item>
							<u-form-item label-width="150" label="上传简历" label-position="top">
								<u-upload :showProgress="false" @on-uploaded="uploadSuccess" @on-remove="uploadRemove"
									:action="`${$BASE_URL}/api/common/upload`" :header="{token: token}" width="138"
									height="138" maxCount="9"></u-upload>
							</u-form-item>
						</view>
						<view v-if="identityIndex==2">
							<u-form-item label="公司名称" label-width="150">
								<u-input style="text-align: right;" placeholder="请输入公司名称" v-model="form.company_name" />
							</u-form-item>
							<u-form-item label="公司网址" label-width="150">
								<u-input placeholder="请输入公司网址" v-model="form.company_url" />
							</u-form-item>
							<u-form-item label="联系人" label-width="150">
								<u-input placeholder="请输入联系人" v-model="form.name" />
							</u-form-item>
							<u-form-item label="手机号" label-width="150">
								<u-input placeholder="请输入手机号" v-model="form.phone" />
							</u-form-item>
							<u-form-item label="城市" label-width="150">
								<u-input placeholder="选择城市" disabled="true" v-model="form.area_text"
									@click="handcity" />
							</u-form-item>
							<u-form-item label="邮箱" label-width="150">
								<u-input placeholder="请输入邮箱" v-model="form.email" />
							</u-form-item>
							<u-form-item label="微信号" label-width="150">
								<u-input placeholder="请输入微信号" v-model="form.wechat" />
							</u-form-item>
							<u-form-item label-width="150" label="公司简介(PPT丶PDF等)" label-position="top">
								<u-upload :showProgress="false" @on-uploaded="uploadSuccess" @on-remove="uploadRemove"
									:action="`${$BASE_URL}/api/common/upload`" :header="{token: token}" width="138"
									height="138" maxCount="9"></u-upload>
							</u-form-item>
						</view>
					</u-form>
				</view>
			</view>
			<view class="box_10 flex-col" style="position: fixed;z-index: 1;bottom: 0;">
				<view class="box_11 flex-col"></view>
				<view class="text-wrapper_5 flex-row justify-between">
					<text class="text_10">实付：</text>
					<text class="text_11">¥{{orders.price}}</text>
				</view>
				<view class="text-wrapper_6 flex-col" style="line-height: 49px;">
					<text class="text_12" @click="toPay">去付款</text>
				</view>
			</view>
		</view>
		<!-- 省市区选择器 -->
		<u-select mode="mutil-column-auto" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect"
			@confirm="regionConfirm"></u-select>



	</view>
</template>
<script>
	import {BASE_URL} from "@/env";
	
	export default {
		data() {
			return {
				constants: {},
				form: {
					pay_type: 1,
					name:'',
					phone:'',
					email:'',
					wechat:'',
					company_name:''
				},
				radio: false,
				checkboxList: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '鲜甜',
						disabled: false
					},
					{
						name: '麻辣',
						disabled: false
					}
				],
				radioList1: [{
						value: 1,
						name: '个人',
						disabled: false
					},
					{
						value: 2,
						name: '公司',
						disabled: false
					}

				],
				radioList2: [{
						value: 1,
						name: '微信',
						disabled: false
					},

				],
				orders: {},
				token: uni.getStorageSync('token'),
				imgList: [],
				identityIndex: 1,
				showSelect: false, //省市区
				addressAreaList: [],
				base_url:BASE_URL
			};
		},
		onLoad(options) {
			this.getArea();
		},
		onShow() {
			this.getVipList()
		},
		created() {
			this.getArea();
		},
		methods: {
			getVipList() {
				uni.request({
					url: this.base_url+'/api/project/vipprice',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						token: uni.getStorageSync('token')
					},
					data: {},
					success: res => {
						this.orders = res.data.data
						console.log(res);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toPay() {
				if (this.identityIndex == 1 && this.form.name == '') {
					uni.showToast({
						icon:'none',
						title: '请输入姓名'
					})
					return
				}
				if (this.identityIndex == 1 && this.form.phone == '') {
					uni.showToast({
						icon:'none',
						title: '请输入手机号'
					})
					return
				}
				if (this.identityIndex == 2 && this.form.company_name == '') {
					uni.showToast({
						icon:'none',
						title: '请输入公司名称'
					})
					return
				}
				if (this.identityIndex == 2 && this.form.name == '') {
					uni.showToast({
						icon:'none',
						title: '请输入联系人'
					})
					return
				}
				if (this.identityIndex == 2 && this.form.phone == '') {
					uni.showToast({
						icon:'none',
						title: '请输入手机号'
					})
					return
				}
				this.form.vip_id = this.orders.id
				this.form.file_path = this.imgList.join(',')
				uni.request({
					url: this.base_url+'/api/project/doMember',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						token: uni.getStorageSync('token')
					},
					data: this.form,
					success: res => {
						console.log(res);
						if (res.data.code == 1) {
							uni.requestPayment({
								provider: 'wxpay', // 服务提提供商
								timeStamp: res.data.data.data.timeStamp, // 时间戳
								nonceStr: res.data.data.data.nonceStr, // 随机字符串
								package: res.data.data.data.package,
								signType: res.data.data.data.signType, // 签名算法
								paySign: res.data.data.data.paySign, // 签名
								success: function(res) {
									console.log('支付成功', res);
									// 业务逻辑。。。
									uni.redirectTo({
										url: '/pages/index/project_list/success?type=' + 0
									})
								},
								fail: function(err) {
									console.log('支付失败', err);
								}
							});


						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			// 上传图片成功
			uploadSuccess(e) {
				this.imgList = [];
				console.log(e)
				e.forEach(item => {
					this.imgList.push(item.response.data.fullurl);
				});
			},

			// 移除图片
			uploadRemove(index) {
				this.imgList.splice(index, 1);
			},

			//选择身份
			checkIdentity(e) {
				console.log(e)
				this.identityIndex = e
			},
			handcity() {
				this.showSelect = true;
			},
			// 获取省市区
			getArea() {
				this.$http("address.area").then((res) => {
					console.log(res)
					if (res.code === 1) {
						let {
							provinceData,
							cityData,
							areaData
						} = res.data;
						provinceData.forEach((item, index) => {
							this.addressAreaList.push({
								...item,
								children: []
							});
							this.addressAreaList[index].children.push(...cityData[index]);
							this.addressAreaList[index].children.forEach((item1, index1) => {
								item1["children"] = [];
								item1.children.push(...areaData[index][index1]);
							});
						});
					}
				});
			},
			// 确认省市区
			regionConfirm(e) {
				console.log(e)
				this.form.province = e[0].value
				this.form.city = e[0].value
				this.form.county = e[0].value
				this.form.area_text = `${e[0].label}-${e[1].label}-${e[2].label}`;
				console.log(this.form.area_text)
			},
		}
	};
</script>
<style scoped lang="scss">
	.page {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
		width: 750rpx;
		height: 1624rpx;
		overflow: hidden;
	}

	.box_1 {
		background-color: rgba(247, 247, 247, 1);
		width: 750rpx;
		height: 1624rpx;
	}

	.box_2 {
		background-color: rgba(255, 255, 255, 1);
		width: 750rpx;
		height: 175rpx;
	}

	.image_1 {
		width: 653rpx;
		height: 24rpx;
		margin: 35rpx 0 0 63rpx;
	}

	.box_3 {
		width: 721rpx;
		height: 64rpx;
		margin: 38rpx 0 0 17rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 34rpx;
		margin-top: 13rpx;
	}

	.text_1 {
		width: 134rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		color: rgba(2, 2, 2, 1);
		font-size: 34rpx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 42rpx;
		margin: 15rpx 0 0 271rpx;
	}

	.image_3 {
		width: 174rpx;
		height: 64rpx;
		margin-left: 122rpx;
	}

	.box_4 {
		background-color: rgba(245, 245, 245, 1);
		width: 750rpx;
		height: 1rpx;
		margin-top: 13rpx;
	}

	.box_5 {
		width: 750rpx;
		height: 331rpx;
	}

	.box_6 {
		background-color: rgba(255, 255, 255, 1);
		padding: 30rpx;
	}

	.text-wrapper_1 {
		display: flex;
	}

	.text_2 {
		width: 126rpx;
		height: 31rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Bold;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
	}

	.text_3 {
		height: 22rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;

	}

	.text-wrapper_2 {
		margin-top: 80rpx;
		text-align: right;
	}

	.text_4 {
		width: 60rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
	}

	.text_5 {
		width: 141rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(239, 119, 0, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Bold;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
	}

	.box_7 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
		width: 750rpx;
		height: 90rpx;
		margin: 20rpx 0 21rpx 0;
	}

	.text_6 {
		width: 125rpx;
		height: 30rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Bold;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
		margin: 30rpx 0 0 48rpx;
	}

	.label_1 {
		width: 31rpx;
		height: 31rpx;
		margin: 29rpx 0 0 196rpx;
	}

	.text_7 {
		width: 254rpx;
		height: 30rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
		margin: 30rpx 0 0 9rpx;
	}

	.label_2 {
		width: 35rpx;
		height: 31rpx;
		margin: 30rpx 0 0 -184rpx;
	}

	.box_8 {
		border-radius: 50%;
		width: 34rpx;
		height: 34rpx;
		border: 2rpx solid rgba(214, 214, 214, 1);
		margin: 28rpx 0 0 42rpx;
	}

	.label_3 {
		width: 32rpx;
		height: 32rpx;
		margin: 29rpx 46rpx 0 82rpx;
	}

	.box_9 {
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 30rpx;
		width: 750rpx;
		padding: 30rpx;
	}

	.text-wrapper_3 {
		width: 125rpx;
		height: 30rpx;
		margin: 44rpx 0 0 47rpx;
	}

	.text_8 {
		width: 125rpx;
		height: 30rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Bold;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
	}

	.group_1 {
		width: 649rpx;
		height: 631rpx;
		margin: 46rpx 0 0 46rpx;
	}

	.paragraph_1 {
		width: 126rpx;
		height: 631rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: left;
		line-height: 100rpx;
	}

	.label_4 {
		width: 31rpx;
		height: 31rpx;
		margin-left: 228rpx;
	}

	.text-wrapper_4 {
		width: 256rpx;
		height: 530rpx;
		margin: 1rpx 0 0 8rpx;
	}

	.text_9 {
		width: 251rpx;
		height: 30rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
	}

	.paragraph_2 {
		width: 93rpx;
		height: 431rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: right;
		line-height: 100rpx;
		margin: 69rpx 0 0 163rpx;
	}

	.image-wrapper_1 {
		width: 200rpx;
		height: 201rpx;
		margin: 32rpx 0 26rpx 48rpx;
	}

	.image_4 {
		width: 200rpx;
		height: 201rpx;
	}

	.image_5 {
		position: absolute;
		left: 673rpx;
		top: 422rpx;
		width: 17rpx;
		height: 28rpx;
	}

	.group_2 {
		background-color: rgba(228, 228, 228, 1);
		position: absolute;
		left: 30rpx;
		top: 188rpx;
		width: 690rpx;
		height: 1rpx;
	}

	.group_3 {
		background-color: rgba(228, 228, 228, 1);
		position: absolute;
		left: 30rpx;
		top: 287rpx;
		width: 690rpx;
		height: 1rpx;
	}

	.group_4 {
		background-color: rgba(228, 228, 228, 1);
		position: absolute;
		left: 30rpx;
		top: 387rpx;
		width: 690rpx;
		height: 1rpx;
	}

	.group_5 {
		background-color: rgba(228, 228, 228, 1);
		position: absolute;
		left: 30rpx;
		top: 486rpx;
		width: 690rpx;
		height: 1rpx;
	}

	.group_6 {
		background-color: rgba(228, 228, 228, 1);
		position: absolute;
		left: 30rpx;
		top: 586rpx;
		width: 690rpx;
		height: 1rpx;
	}

	.group_7 {
		background-color: rgba(228, 228, 228, 1);
		position: absolute;
		left: 30rpx;
		top: 685rpx;
		width: 690rpx;
		height: 1rpx;
	}

	.group_8 {
		border-radius: 50%;
		position: absolute;
		left: 588rpx;
		top: 120rpx;
		width: 34rpx;
		height: 34rpx;
		border: 2rpx solid rgba(214, 214, 214, 1);
	}

	.box_10 {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
		width: 750rpx;
		height: 92rpx;
		margin-top: 17rpx;
	}

	.box_11 {
		background-color: rgba(228, 228, 228, 1);
		width: 750rpx;
		height: 1rpx;
	}

	.text-wrapper_5 {
		width: 237rpx;
		height: 28rpx;
		margin: 32rpx 0 31rpx 44rpx;
	}

	.text_10 {
		width: 64rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
		margin-top: 1rpx;
	}

	.text_11 {
		width: 159rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(239, 119, 0, 1);
		font-size: 36rpx;
		font-family: PingFang-SC-Bold;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
	}

	.text-wrapper_6 {
		background-color: rgba(237, 134, 31, 1);
		height: 92rpx;
		width: 250rpx;
		position: absolute;
		left: 500rpx;
		top: 0;
	}

	.text_12 {
		width: 94rpx;
		height: 31rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 68rpx;
		margin: 29rpx 0 0 93rpx;
	}

	.pay {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 30rpx;
	}
</style>